<template>
  <div class="shop_item">
    <img :src="'https://elm.cangdu.org/img/' + ShopInfo.image_path">
    <div class="shop_content_right">
      <div class="title">
        <span class="brand">品牌</span>
        <h4>{{ShopInfo.name}}</h4>
      </div>
      <div class="bjp">
        <span>{{bao}}</span>
        <span>{{zhun}}</span>
        <span>{{piao}}</span>
      </div>
      <div class="order_section">
        月售
        <span>{{ShopInfo.recent_order_num}}</span>
        单
      </div>
      <p class="fee">
        ￥{{ShopInfo.float_minimum_order_amount}}起送
        <span class="segmentation">/</span>
        配送费约{{ShopInfo.float_delivery_fee}}￥
      </p>
      <div class="payWay">
        蜂鸟专送
      </div>
      <div class="getWay">
        准时达
      </div>
      <div class="distance_time">
        <span>{{ShopInfo.distance}}</span>
        <span class="segmentation">/</span>
        <span style="color: #3190e8;">{{ShopInfo.order_lead_time}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bao: "",
        zhun: "",
        piao: ""
      }
    },
    props: {
      ShopInfo: Object,
    },
    mounted() {
      //判断bzp的个数，根据要求填入数据
      if (this.ShopInfo.supports.length == 3) {
        this.bao = this.ShopInfo.supports[0].icon_name;
        this.zhun = this.ShopInfo.supports[1].icon_name;
        this.piao = this.ShopInfo.supports[2].icon_name
      } else if (this.ShopInfo.supports.length == 2) {
        this.bao = this.ShopInfo.supports[0].icon_name;
        this.zhun = this.ShopInfo.supports[1].icon_name;
      } else if (this.ShopInfo.supports.length == 1) {
        this.bao = this.ShopInfo.supports[0].icon_name;
      }
    },
  }
</script>

<style lang="less" scoped>
  .shop_item {
    position: relative;
    width: 100%;
    height: 200px;
    border-bottom: 1px solid #f1f1f1;
    padding: 25px 12px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .shop_item img {
    height: 85%;
    display: block;
    float: left;
    margin-top: 8px;
    margin-right: 15px;
  }

  .shop_content_right {
    float: left;
  }

  .title {
    overflow: hidden;
  }

  .brand {
    margin-top: 7px;
    background-color: #ffd930;
    color: #333333;
    font-size: 13px;
    display: block;
    float: left;
    font-weight: 600;
  }

  h4 {
    display: block;
    float: left;
    font-size: 31px;
    margin-left: 10px;
  }

  .bjp {
    position: absolute;
    right: 12px;
    top: 20px;
  }

  .bjp span {
    font-size: 2px !important;
    color: #999;
    border: 1px solid #f2f2f2;
  }

  .order_section {
    margin-top: 25px;
    font-size: 10px;
    color: #666
  }

  .order_section span {
    font-size: 10px;
  }

  .fee {
    margin-top: 19px;
    font-size: 10px;
    color: #666
  }

  .fee span {
    font-size: 10px;
  }

  .payWay {
    position: absolute;
    right: 90px;
    top: 80px;
    font-size: 1px;
    padding: 2px 1px;
    color: white;
    background-color: #3190e8;
  }

  .getWay {
    position: absolute;
    right: 12px;
    top: 80px;
    font-size: 1px;
    color: #3190e8;
    background-color: white;
    border: 1px solid #3190e8;
  }

  .distance_time {
    position: absolute;
    right: 20px;
    top: 130px;
  }

  .distance_time span {
    font-size: 10px;
    color: #999;
  }
</style>